/*
  bp1: '(min-width: 520px)',
  bp2: '(min-width: 900px)',
  bp3: '(min-width: 1200px)',
  bp4: '(min-width: 1800px)',
*/

.StatsSection {
	position: relative;
	padding-bottom: var(--space-7);
	--stats-section-background-1: var(--amber-a4);
	--stats-section-background-2: var(--grass-a2);
	--stats-section-background-3: var(--sky-a4);
	--stats-section-chart-line-start-color: var(--gray-5);
	--stats-section-chart-line-end-color: var(--gray-7);
	--stats-section-chart-tip-color: var(--gray-7);
	--stats-section-chart-top-color: var(--color-background);
	--stats-section-chart-bottom-color: var(--color-background);
}

:global(:where(.dark, .dark-theme)) .StatsSection {
	--stats-section-background-3: var(--blue-a3);
	--stats-section-background-2: var(--plum-a3);
	--stats-section-background-1: var(--crimson-a5);
	--stats-section-chart-line-start-color: var(--plum-5);
}

.StatsSectionGraphicLeft {
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--stats-section-chart-line-start-color)
	);
	flex: 0 0 auto;
	max-width: 1400px;
}

@media (min-width: 900px) {
	.StatsSectionGraphicLeft {
		flex-grow: 1;
	}
}

@media (min-width: 1500px) {
	.StatsSectionGraphicLeft {
		flex-grow: 100;
	}
}

.StatsSectionGraphicMain {
	flex: none;
	width: 100vw;
	height: 250px;
	margin-right: -20%;
	/* Safari rendering bug */
	transform: translateY(0.1px);
}

.StatsSectionGraphicMain svg {
	overflow: visible;
	width: 100%;
	height: 100%;
}

@media (min-width: 520px) {
	.StatsSectionGraphicMain {
		height: 150px;
	}
}

@media (min-width: 900px) {
	.StatsSectionGraphicMain {
		margin-right: -20px;
		width: 55vw;
		height: calc(150px + 2vw);
	}
}

@media (min-width: 1500px) {
	.StatsSectionGraphicMain {
		margin-right: 0;
		width: 960px;
		height: 320px;
	}
}

.StatsSectionGraphicRight {
	height: 310px;
	position: relative;
	flex: 0 1 auto;
	flex-grow: 0;
}

@media (min-width: 520px) {
	.StatsSectionGraphicRight {
		height: 150px;
	}
}

@media (min-width: 900px) {
	.StatsSectionGraphicRight {
		height: calc(150px + 2vw);
	}
}

@media (min-width: 1300px) {
	.StatsSectionGraphicRight {
		flex-grow: 0;
	}
}

@media (min-width: 1500px) {
	.StatsSectionGraphicRight {
		height: 320px;
		flex-grow: 1;
	}
}

@media (min-width: 1800px) {
	.StatsSectionGraphicRight {
		flex-grow: 20;
	}
}
